

<h3 mat-dialog-title class="mb-3">Embed Chatbot or AI Search on your website</h3>

<div mat-dialog-content class="content">

  <mat-tab-group
    mat-stretch-tabs
    (selectedIndexChange)="selectedIndexChange($event)"
    dynamicHeight
    animationDuration="0ms">

    <mat-tab label="Chatbot">

      <mat-form-field class="w-100 standalone-field pt-4">
        <span
          matPrefix
          matTooltip="Header of chat window"
          class="d-flex flex-nowrap align-items-center justify-content-between me-2">
          <mat-icon>edit</mat-icon>
          <span class="text-muted">|</span>
        </span>
        <input
          matInput
          placeholder="Header ..."
          spellcheck="false"
          [(ngModel)]="header"
          autocomplete="off">
      </mat-form-field>

      <mat-form-field class="w-100 standalone-field">
        <span
          matPrefix
          matTooltip="Button text, defaults to chat icon"
          class="d-flex flex-nowrap align-items-center justify-content-between me-2">
          <mat-icon>touch_app</mat-icon>
          <span class="text-muted">|</span>
        </span>
        <input
          matInput
          placeholder="Button text ..."
          spellcheck="false"
          [(ngModel)]="buttonTxt"
          autocomplete="off">
      </mat-form-field>

      <mat-form-field class="w-100 standalone-field">
        <span
          matPrefix
          matTooltip="Theme to use"
          class="d-flex flex-nowrap align-items-center justify-content-between me-2">
          <mat-icon>palette</mat-icon>
          <span class="text-muted">|</span>
        </span>
        <mat-select
          [(ngModel)]="theme"
          placeholder="Theme ...">
          <mat-option
            *ngFor="let idx of themes"
            [value]="idx">
            {{idx}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <div class="mt-3">

        <mat-checkbox
          [(ngModel)]="search"
          labelPosition="before"
          class="me-3"
          matTooltip="Have chatbot show references or citations"
          color="primary">References</mat-checkbox>

        <mat-checkbox
          [(ngModel)]="chat"
          labelPosition="before"
          disabled="true"
          class="me-3"
          color="primary">Chat</mat-checkbox>

        <mat-checkbox
          [(ngModel)]="markdown"
          labelPosition="before"
          matTooltip="Use Markdown conversion in chatbot"
          class="me-3"
          color="primary">Markdown</mat-checkbox>

        <mat-checkbox
          [(ngModel)]="speech"
          labelPosition="before"
          class="me-3"
          disabled="true"
          color="primary">Speech</mat-checkbox>

        <mat-checkbox
          [(ngModel)]="rtl"
          labelPosition="before"
          class="me-3"
          matTooltip="Right to left languages, such as Arabic, Hebrew, Farsi, etc"
          color="primary">RTL</mat-checkbox>

        <mat-checkbox
          [(ngModel)]="has_button"
          labelPosition="before"
          class="me-3"
          matTooltip="Show a submit button simplifying usage"
          color="primary">Submit button</mat-checkbox>

        <mat-checkbox
          [(ngModel)]="stream"
          labelPosition="before"
          class="me-3"
          matTooltip="Stream results, implying start writing out result immediately once it's available"
          color="primary">Stream</mat-checkbox>

      </div>

    </mat-tab>

    <mat-tab label="AI Search">

      <mat-form-field class="w-100 standalone-field pt-4">
        <span
          matPrefix
          matTooltip="Placeholder of search field"
          class="d-flex flex-nowrap align-items-center justify-content-between me-2">
          <mat-icon>edit</mat-icon>
          <span class="text-muted">|</span>
        </span>
        <input
          matInput
          placeholder="Placeholder"
          spellcheck="false"
          [(ngModel)]="placeholder"
          autocomplete="off">
      </mat-form-field>
  
      <mat-form-field class="w-100 standalone-field">
        <span
          matPrefix
          matTooltip="Button text"
          class="d-flex flex-nowrap align-items-center justify-content-between me-2">
          <mat-icon>touch_app</mat-icon>
          <span class="text-muted">|</span>
        </span>
        <input
          matInput
          placeholder="Button text"
          spellcheck="false"
          [(ngModel)]="buttonTxtSearch"
          autocomplete="off">
      </mat-form-field>

      <mat-form-field class="w-100 standalone-field">
        <span
          matPrefix
          matTooltip="Theme to use"
          class="d-flex flex-nowrap align-items-center justify-content-between me-2">
          <mat-icon>palette</mat-icon>
          <span class="text-muted">|</span>
        </span>
        <mat-select
          [(ngModel)]="themeSearch"
          placeholder="Theme">
          <mat-option
            *ngFor="let idx of themesSearch"
            [value]="idx">
            {{idx}}
          </mat-option>
        </mat-select>
      </mat-form-field>
  
      <mat-form-field class="w-100 standalone-field">
        <span
          matPrefix
          matTooltip="Max number of results"
          class="d-flex flex-nowrap align-items-center justify-content-between me-2">
          <mat-icon>timeline</mat-icon>
          <span class="text-muted">|</span>
        </span>
        <input
          matInput
          placeholder="Max results"
          type="number"
          step="1"
          [(ngModel)]="maxSearch"
          autocomplete="off">
      </mat-form-field>
  
    </mat-tab>

  </mat-tab-group>

</div>

<div mat-dialog-actions [align]="'end'">

  <a
    *ngIf="landing_page"
    mat-flat-button
    target="_blank"
    [href]="getLandingPage()">
    Demo
  </a>

  <button
    mat-button
    (click)="embedUrl()">
    Copy URL
  </button>

  <button
    mat-button
    (click)="embed()">
    Copy HTML
  </button>

  <button
    mat-flat-button
    color="primary"
    mat-dialog-close>
    Close
  </button>

</div>
